Cours CSS – 01 Octobre 2025

Positionnement en CSS

Il existe deux types d'éléments : block et inline :

Block : prend toute la largeur disponible (celle du parent), l’élément suivant passe en dessous
Inline : prend uniquement la largeur de son contenu, permet de placer plusieurs éléments sur la même ligne

Par défaut, chaque élément HTML se comporte soit en block, soit en inline.

Propriété CSS `display`

On peut modifier le comportement par défaut avec la propriété display :

display: block;
display: inline;

Voir fichier projet HTML 2 pour des exemples pratiques.

Marges et paddings

Intérieures : padding
Extérieures : margin

On peut cibler chaque côté :

margin-top, margin-right, margin-bottom, margin-left
Ou utiliser la notation raccourcie :

margin: 50px;             /* haut et bas 50px, gauche et droite 50px */
margin: 50px 20px;        /* haut/bas 50px, gauche/droite 20px */
margin: 50px 20px 30px 40px; /* haut, droite, bas, gauche */

Propriétés importantes : margin, padding, border

À retenir : ne pas dimensionner un élément avec height fixe pour éviter des problèmes de flexibilité.

Pour les éléments inline, la propriété text-align peut être utilisée pour aligner le contenu.

Pseudo-classes

:hover → appliquée quand la souris passe dessus (éviter de modifier la taille pour ne pas tout décaler)
:visited → pour les liens déjà visités (vérifier le contraste pour l’accessibilité)
:focus → pour les éléments interactifs lorsqu’ils sont sélectionnés, souvent utilisé avec outline pour l’accessibilité

<div> et container

La balise <div> est un élément neutre de type block.

On l’utilise couramment avec la classe container pour :

Regrouper plusieurs éléments et les positionner ensemble
Garder la possibilité de positionner d’autres éléments différemment